안녕하세요! 멘토님 이어서 Step1 과제 PR 올립니다.

리액트 버전 때문에 충돌이 나는데,

npm install --save --legacy-peer-deps 로 해결 하시면 될 것 같습니다.

테스트 코드 작성이 처음이기도 하고 GPT 와 구글링의 도움을 너무 많이 받았습니다..
제가 무엇을 모르는지 모르는거 같아서 더 걱정입니다 ㅠ

그래도 질문이 몇가지 있습니다!

아래는 초기에 제가 작성한 useGetCategories.test.tsx 의 일부 입니다.

const { result, waitForNextUpdate } = renderHook(() => useGetCategories(), { wrapper });

테스트는 성공적으로 수행되나 다음과 같은 경고가 뜹니다.

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

조금 찾아보니, @testing-library/react-hooks 는 현재 유지 보수가 중단되었고 React 18과의 호환성 문제가 발생할 수 있다는 내용이었습니다.

위 경고를 피하기 위해서 테스트 컴포넌트를 렌더링하여 UI에 렌더링 된 결과를 검증하는 방식을 사용했습니다.

const TestComponent = () => {
  const { data, isLoading, isError } = useGetCategories();

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return (
    <div>
      {data?.map(category => (
        <div key={category.id}>{category.name}</div>
      ))}
    </div>
  );
};

test('useGetCategories 가 성공적으로 카테고리를 Fetching', async () => {
  //  ...

  // When: 컴포넌트를 렌더링하고, 데이터 로딩 완료를 기다림
  render(
    <QueryClientProvider client={queryClient}>
      <TestComponent />
    </QueryClientProvider>
  );

  // ...
}

이 방법을 채택하니 경고문은 사라졌는데 궁금한 점이 생겼습니다.

기존에 제가 사용한 renderHook 은 반환 값에 직접 접근할 수 있었던 반면, render 는 컴포넌트를 실제로 렌더링하여 UI 에 렌더링된 결과를 검증하는 방식입니다.

제공된 Category mock 데이터가 운 좋게도 배열 데이터여서,

CATEGORIES_RESPONSE_DATA.forEach(category => {
  expect(screen.getByText(category.name)).toBeInTheDocument();
});

이런 방식으로 검증을 하긴 했는데 옳은 방법인지 모르겠습니다.

또, OrderPage.test.tsx 코드의 일부입니다.

// 현금 영수증 번호 입력
const cashReceiptNumberInput = screen.getByPlaceholderText('(-없이) 숫자만 입력해주세요.') as HTMLInputElement;
fireEvent.change(cashReceiptNumberInput, { target: { value: '01012345678' } });

// 현재 입력 필드 값 확인 (디버깅 용)
console.log('Cash Receipt Number Input Value:', cashReceiptNumberInput.value);

디버깅 코드를 통해 현금영수증 번호가 제대로 들어가고 있다는 것을 알 수 있는데,

다음과 같이 테스트에 실패합니다. 이유가 무엇일까요 ㅠㅠ?

궁금한점을 정리하면 다음과 같습니다.

1. renderHook 처럼 반환 값에 직접 접근할 수 있는 방법이 있을까요?

2. 아니면, 경고문을 그냥 무시하고 renderHook 을 사용해도 되나요? (= @testing-library/react-hooks 뿐만 아니라 생각보다 많은 라이브러리에서 비슷한 호환성 문제들과 마주하곤 하는데 무시하면 어떻게 될까요?)

3. OrderPage.test.tsx 테스트 코드가 제대로 작동하지 않는 이유가 무엇일까요 ?